<template>
	<view class="content">
		<view class="start-box">
			<view class="start-box-title">服务评价</view>
			<view class="stars-box">
				<view class="stars-imgs" v-for="(item,index) in starsArray" @click="pingjiaFun" :data-index="index" :key='index'>
					<image v-if='index < stars' class="starts-img" :src="item.yellowStar" mode=""></image>
					<image v-else class="starts-img" :src="item.huiStar" mode=""></image>
				</view>
			</view>
			<textarea v-model="textRemark" placeholder="请您评价本次回收服务" class="utextarea-input" />
			<view class="success-btn" @click="tijiaoPj">完成</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	
	export default{
		data(){
			return{
				starsArray:[
					{
						huiStar:baseUrl+'/uploads/static/image/evaluate_icon_star_gray@2x.png',
						yellowStar:baseUrl+'/uploads/static/image/recovery_ evaluate_icon_star_yellow@2x.png',
					},
					{
						huiStar:baseUrl+'/uploads/static/image/evaluate_icon_star_gray@2x.png',
						yellowStar:baseUrl+'/uploads/static/image/recovery_ evaluate_icon_star_yellow@2x.png',
					},
					{
						huiStar:baseUrl+'/uploads/static/image/evaluate_icon_star_gray@2x.png',
						yellowStar:baseUrl+'/uploads/static/image/recovery_ evaluate_icon_star_yellow@2x.png',
					},
					{
						huiStar:baseUrl+'/uploads/static/image/evaluate_icon_star_gray@2x.png',
						yellowStar:baseUrl+'/uploads/static/image/recovery_ evaluate_icon_star_yellow@2x.png',
					},
					{
						huiStar:baseUrl+'/uploads/static/image/evaluate_icon_star_gray@2x.png',
						yellowStar:baseUrl+'/uploads/static/image/recovery_ evaluate_icon_star_yellow@2x.png',
					},
				],
				stars:1,
				textRemark:'',
				id:''
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		methods:{
			pingjiaFun(e){
				let index  = e.currentTarget.dataset.index 
				this.stars = index+1
			},
			tijiaoPj(e){
				let _this = this
				http.getUserEvaluate({
					id:_this.id,
					evaluate_content:_this.textRemark,
					stars:_this.stars
				}).then((res)=>{
					console.log(res)
					if(res.data.code == 1){
						uni.showToast({
							title:'提交成功',
							icon:'success'
						})
						setTimeout(function(){
							uni.redirectTo({
								url:'/pages/my/orderList'
							})
						})
					}
				})
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		min-height: 100vh;
		background: #F8F9FD;
		box-sizing: border-box;
		padding: 12px;
		font-family: 'PingFang Bold';
	}
	.start-box{
		width: 100%;
		background-color: #fff;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 20px;
	}
	.start-box-title{width: 100%;text-align: center;font-size: 17px;}
	.stars-box{
		width: 100%;margin-top: 15px;
		display: flex;flex-direction: row;align-items: center;justify-content: center;
	}
	.stars-imgs{width: 30px;height: 30px;margin-right: 12px;}
	.starts-img{width: 100%;height: 100%;}
	.starts-img:last-child{margin-right: 0;}
	.utextarea-input{width: 100%;margin-top: 50px;height: 100px;border-radius: 10px;background: #F2FCFA;box-sizing: border-box;padding: 15px;font-size: 12px;}
	.success-btn{width: 100%;height: 45px;border-radius: 10px;background-color: #00CB8B;text-align: center;line-height: 45px;color: #fff;margin-top: 20px;}
</style>